<template>
	<gui-page>
		<template v-slot:gBody>
			<view class="gui-padding-x">
				<accordCard
					:status="currentIndex === 0"
					:currentIndex="0"
					:title="`基准以(${jzsj})为基准日期`"
					:opts="opts"
					:chartData="jzoption"
					:chartType="'column'"
					:chartTouch="false"
					@open="open"
					@close="close"
				></accordCard>
				<accordCard
					:status="currentIndex === 1"
					:currentIndex="1"
					:title="`当日使用情况(${sj})`"
					:opts="opts"
					:chartData="droption"
					:chartType="'column'"
					:chartTouch="false"
					@open="open"
					@close="close"
				></accordCard>
				<accordCard
					:status="currentIndex === 2"
					:currentIndex="2"
					:title="`当日节电情况(${sj})`"
					:opts="opts"
					:chartData="jdoption"
					:chartType="'column'"
					:chartTouch="false"
					@open="open"
					@close="close"
				></accordCard>
				<accordCard
					:status="currentIndex === 3"
					:currentIndex="3"
					:title="`当日设备电量(有功KWH/无功Kvar)(${sj})`"
					:opts="otheropts"
					:chartData="curvalueoption"
					:chartType="'column'"
					:chartTouch="false"
					@open="open"
					@close="close"
				></accordCard>
			</view>
		</template>
	</gui-page>
</template>
<script setup>
	import {
		ref,
		getCurrentInstance,
		createApp
	} from 'vue'
	import {
		onLoad,
		onPullDownRefresh
	} from '@dcloudio/uni-app'
	import accordCard from "@/lib/components/accord-card.vue"
	import guiPage from "@/Grace6/components/gui-page.vue"
	import ybmethod from '../../lib/js/ybmethod'
	import ybgolbal from '../../lib/js/ybgolbal'
	const app = createApp();
	const ybapi = ybgolbal.getybapi(getCurrentInstance());
	let id = ref('');
	let item = ref({});
	let currentIndex = ref(0);
	let sj = ref('');
	let jzsj = ref('');
	let jzoption = ref({});
	let droption = ref({});
	let jdoption = ref({});
	let curvalueoption = ref({});
	let opts = ref({
		color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
		enableScroll: false,
		legend: {
			show: false
		},
		xAxis: {
			disableGrid: true,
			fontSize: 8
		},
		yAxis: {
			data: [{
				min: -100,
				title: '',
				titleOffsetY: -7,
				titleOffsetX: 70
			}],
			showTitle: true
		},
		extra: {
			column: {
				type: "group",
				width: 50,
				activeBgColor: "#000000",
				activeBgOpacity: 0.08
			},
			tooltip: {
				fontSize: 8,
				legendShape: "line"
			},
			markLine: {
				data: [{
					value: 0,
					showLabel: true,
					lineColor: "#CCCCCC",
					labelBgColor: "#ffffff",
					labelBgOpacity: 0
				}]
			}
		}
	});
	let otheropts = ref({
		color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4","#ea7ccc"],
		enableScroll: false,
		legend: {
			show: true
		},
		xAxis: {
			disableGrid: true,
			fontSize: 8
		},
		yAxis: {
			data: [{
				title: '',
				titleOffsetY: -7,
				titleOffsetX: 70
			}],
			showTitle: true
		},
		extra: {
			column: {
				type: "group",
				width: 50,
				activeBgColor: "#000000",
				activeBgOpacity: 0.08
			},
			tooltip: {
				fontSize: 8,
			}
		}
	});
	let jzopts = ref({});
	let dropts = ref({});
	let jdopts = ref({});
	let title = ref('');
	onLoad((option)=>{
		console.log("静进入当日图例页面")
		console.log(option);
		id.value = option.id;
		getData();
	})
	onPullDownRefresh(()=>{
		ybmethod.onPullDownRefresh(getData);
	})
	function getData(){
		ybapi.Devices_GetJNInfoByid(id.value,function(data){
			console.log(data);
			item.value = data;
			sj.value = ybmethod.formatDateString(String(data.sj));
			jzsj.value = ybmethod.formatDateString(String(data.jzsj));
			setjzoption();
			setdroption();
			setjdoption();
			setcurvalueoption();
		},function(e){
			console.log(e);
		})
	}
	function open(idx){
		currentIndex.value = idx;
	}
	function close(){
		currentIndex.value = -1;
	}
	function setjzoption(){
		console.log(item.value.jzygdl);
		let res = {
			categories: ['有功电量(KWH)','无功电量(Kvar)','总电流(A)'],
			series: [{
				name: '',
				data: [item.value.jzygdl * 1,item.value.jzwgdl * 1,item.value.jzzdl * 1]
			}]
		}
		jzoption.value = JSON.parse(JSON.stringify(res));
	}
	function setdroption(){
		let res = {
			categories: ['当日有功电量(KWH)','当日无功电量(Kvar)','当日平均总电流(A)'],
			series: [{
				name: '',
				data: [item.value.curygdl * 1,item.value.curwgdl * 1,item.value.curzdl * 1]
			}]
		}
		droption.value = JSON.parse(JSON.stringify(res));
	}
	function setjdoption(){
		let res = {
			categories: ['当日节电的有功电量KWH',"当日节电的无功电量Kvar"],
			series: [{
				name: '',
				data: [item.value.jnygdl * 1,item.value.jnwgdl * 1]
			}]
		}
		jdoption.value = JSON.parse(JSON.stringify(res))
	}
	function setcurvalueoption(){
		let res = {
			categories: ['当日起始值','当日结束值'],
			series: [
				{
					name: "有功电量KWH",
					data: [item.value.curygdlstart * 1, item.value.curygdlend * 1]
				},
				{
					name: "无功电量Kvar",
					data: [item.value.curwgdlstart * 1,item.value.curwgdlend * 1]
				}
			]
		}
		curvalueoption.value = JSON.parse(JSON.stringify(res))
	}
	app.component({
		accordCard,
		guiPage
	});
</script>
<style scoped>
	.charts-box {
		width: 100%;
		height: 300px;
	}
</style>